<script setup lang="ts">
import {
  NLayout,
  NLayoutHeader,
  NLayoutContent,
  NButton,
  NMenu,
} from 'naive-ui';
import { useRouter, useRoute } from 'vue-router';
import { computed, h } from 'vue';
import { RouterName } from '@/config/router';

const router = useRouter();
const route = useRoute();

// 导航菜单选项
const menuOptions = [
  {
    label: '角色列表',
    key: RouterName.CharacterList,
    icon: () =>
      h(
        'svg',
        {
          class: 'w-5 h-5',
          fill: 'none',
          stroke: 'currentColor',
          viewBox: '0 0 24 24',
        },
        [
          h('path', {
            'stroke-linecap': 'round',
            'stroke-linejoin': 'round',
            'stroke-width': '2',
            d: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z',
          }),
        ]
      ),
  },
  {
    label: '创建角色',
    key: RouterName.CharacterCreate,
    icon: () =>
      h(
        'svg',
        {
          class: 'w-5 h-5',
          fill: 'none',
          stroke: 'currentColor',
          viewBox: '0 0 24 24',
        },
        [
          h('path', {
            'stroke-linecap': 'round',
            'stroke-linejoin': 'round',
            'stroke-width': '2',
            d: 'M12 4v16m8-8H4',
          }),
        ]
      ),
  },
];

// 当前选中的菜单项
const selectedKey = computed(() => {
  return route.name as string;
});

// 处理菜单点击
const handleMenuSelect = (key: string) => {
  router.push({ name: key });
};
</script>

<template>
  <NLayout class="!h-screen !w-full !flex !flex-col">
    <NLayoutHeader
      bordered
      class="!h-[60px] !flex !items-center !justify-between !px-6 !text-lg !font-medium"
    >
      <div class="flex items-center gap-8">
        <div
          class="text-[20px] text-neutral-950 font-bold flex items-center gap-2"
        >
          <svg
            class="w-6 h-6 text-blue-500"
            fill="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
            />
          </svg>
          刺猬AI角色扮演
        </div>

        <!-- 导航菜单 -->
        <NMenu
          mode="horizontal"
          :options="menuOptions"
          :value="selectedKey"
          @update:value="handleMenuSelect"
          class="!border-none !bg-transparent"
        />
      </div>

      <div class="flex items-center gap-3">
        <NButton
          text
          @click="$router.push({ name: 'CharacterList' })"
          class="text-gray-600 hover:text-gray-900"
        >
          首页
        </NButton>
      </div>
    </NLayoutHeader>
    <NLayoutContent content-class="!h-[calc(100vh-60px)] !overflow-y-auto">
      <RouterView />
    </NLayoutContent>
  </NLayout>
</template>
